"use client"
import Image from 'next/image'
import Link from "next/link";
import {BiChevronRight} from "react-icons/bi";
import {Swiper} from "@/components/Swiper";
import clsx from "clsx";

export default function Page() {
    return (
        <div>
            <BannerSection/>
            <div className={"max-w-7xl mx-auto"}>
                <ProductSection/>
            </div>
            <div className={"max-w-7xl mx-auto"}>
                <NewsSection/>
            </div>
            <ActionSection/>

        </div>
    )
}


const images = [
    'https://www-file.huawei.com/-/media/corp2020/home/banner/8/vmall-11-warmup-pc.jpg',
    'https://www-file.huawei.com/-/media/corp2020/home/banner/8/hwcloud-1111-warmup3.jpg',
]

function BannerSection() {
    return (
        <>
            <Swiper images={images}/>
        </>

    )
}


function ProductSection() {

    const products = [
        {
            id: 1,
            title: '华为智慧屏 V5 Pro',
            description: '创新交互 开创"巨幕手机"新时代',
            cover: '/images/huawei-vision-v5-pro.jpg',
            span: 8,
        }, {
            id: 2,
            title: 'HUAWEI FreeBuds Pro 3',
            description: '超CD无损音质',
            cover: '/images/free-buds-pro-3-550.jpg',
            span: 4,
        }
    ]

    return (
        <div className={"py-10"}>
            <SectionTitle title={'推荐信息'}/>
            <div className={"grid grid-cols-12 gap-8"}>
                {
                    products.map((item, index) =>
                        <div key={index}
                             className={clsx("overflow-hidden group rounded-sm relative col-span-12", `md:col-span-${item.span}`)}>
                            <Image className={"group-hover:scale-[1.05] transition-all duration-500 w-full"}
                                   src={item.cover}
                                   alt={'cover'}
                                   width={600}
                                   height={200}/>
                            <div
                                className={"text-white absolute w-full bottom-[-60px] group-hover:bottom-0 px-6 pb-[40px] bg-gradient-to-b from-transparent to-black transition-all duration-500"}>
                                <div className={"text-sm"}>产品</div>
                                <div className={"text-xl font-bold"}>{item.title}</div>
                                <div className={"text-gray-300 text-sm"}>{item.description}</div>
                                <Link href={`/product/detail?id=${item.id}`}
                                      className={"text-sm flex items-center gap-x-2 mt-[20px]"}>
                                    了解更多 <BiChevronRight className={"text-red-600"} size={18}/>
                                </Link>
                            </div>
                        </div>
                    )
                }
            </div>
        </div>
    )
}


function NewsSection() {

    const news = [
        {
            id: 1,
            title: '华为入选Gartner®运营商服务和网络保障领域代表供应商',
            content: '将5G-A带入现实 2023全球移动宽带论坛',
            cover: '/images/231013-10.jpg?la=zh',
            createdAt: '3天前',
            description: ''
        }, {
            id: 2,
            title: '《2023非洲宽带展望》白皮书发布，推动数字非洲蓬勃发展',
            content: '[阿联酋，迪拜，2023年10月13日] 华为携手WBBA (The World Broadband Association) 在迪拜举行2023非洲宽带论坛，政府机构、电信监管组织、行业组织、运营商、智库及分析师齐聚一堂，就宽带行业趋势、全球最佳实践和创新解决方案等话题进行了深入探讨。会上，知名咨询公司Omdia发布了《2023非洲宽带展望》白皮书，详细阐述了非洲宽带产业发展现状、趋势及面向未来发展的举措建议。',
            cover: '/images/231016-4.jpg?la=zh',
            createdAt: '2023/11/01',
            description: ''
        }, {
            id: 3,
            title: '华为发布面向数据中心场景的下一代OTN——Kepler平台',
            content: '',
            cover: '/images/231018-1.png',
            createdAt: '2023/10/28',
            description: ''
        },
    ]

    return (
        <div className={"py-6"}>
            <SectionTitle title={'新闻与活动'}/>
            <div className={"flex grid-cols-12 gap-x-2 gap-y-2 "}>
                {
                    news.map((item, index) =>
                        <Link href={`/article?id=${item.id}`} key={index}
                              className={"relative col-span-4 rounded-sm overflow-hidden group bg-gray-100"}>
                            <div className={"overflow-hidden h-[300px] w-full"}>
                                <Image src={item.cover} alt={'cover'} width={400} height={300}
                                       className={"group-hover:scale-[1.05] transition-all duration-500 h-[300px] w-full object-cover"}/>
                            </div>
                            <div className={"p-2"}>
                                <p className={"font-bold line-clamp-2 h-[48px]"}>{item.title}</p>
                                <p className={"text-gray-400"}>{item.createdAt}</p>
                            </div>
                        </Link>)
                }
            </div>
            <div className={"flex items-center gap-x-3 justify-center py-4"}>
                <Link href={'/news'}
                      className={"cursor-pointer border border-black hover:border-red-600 hover:bg-red-600 px-8 py-2 hover:text-white transition-all duration-300"}>
                    更多活动
                </Link>
                <Link href={'/news'}
                      className={"cursor-pointer border border-black hover:border-red-600 hover:bg-red-600 px-8 py-2 hover:text-white transition-all duration-300"}>
                    更多新闻
                </Link>

            </div>

        </div>
    )
}


function ActionSection() {
    return (
        <div className={"py-10"}>
            <Image src={'https://www-file.huawei.com/-/media/corp2020/home/sbanner/2/yellow-rever-delta-5.jpg'}
                   alt={'cover'} width={1920} height={400} className={"w-full"}/>

        </div>
    )
}

function SectionTitle({title}: { title: string }) {
    return (
        <div className={"w-full flex flex-col justify-center items-center gap-y-2 pb-10 pt-5"}>
            <p className={"font-bold text-3xl"}>{title}</p>
            <div className={"bg-red-600 h-[2px] w-[50px]"}></div>
        </div>
    )
}
